<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <div class="btns">
        <button data-path="news">新闻</button>
        <button data-path="play">娱乐</button>
        <button data-path="game">游戏</button>
    </div>
    <div class="container"></div>
</body>

</html>
<script>
    const btns = document.querySelectorAll(".btns button");
    const c = document.querySelector(".container")

    //1.书写一个路由表,在实现路由的时候,按照这个路由表的映射关系决定
    const routes = [{
            path: "/news",
            content: "我是新闻模块"
        },
        {
            path: "/play",
            content: "我是娱乐模块"
        },
        {
            path: "/game",
            content: "我是游戏模块"
        },
    ];

    //2. 给每一个导航绑定点击事件,可以根据导航上的属性,跳转到指定的hash地址
    for (var i = 0; i < btns.length; i++) {
        btns[i].onclick = function () {
            location.hash = "#" + this.dataset.path;
        }
    }

    //3. 监听hash的改变,根据路由表加载对应的视图
    window.onhashchange = function () {
        routes.forEach((item) => {
            if (item.path.slice(1) === location.hash.slice(1)) {
                c.textContent = item.content;
            }
        })
    }
</script>